<template>
    <div class="wuhu">
        <van-nav-bar title="仓库" fixed/>
        <van-notice-bar left-icon="volume-o" text="邪神小蜜蜂温馨提示：物品即将过期请尽快食用或使用。" />
        <van-tabs v-model="active">
            <van-tab :title="item" v-for="(item, index) in columns" :key="index">
                <van-grid :column-num="3">
                    <van-grid-item v-if="typearr[index1] == item" v-for="(item1, index1) in idarr" :key="index1"
                        class="biankuang">

                        <div class="zhaopian">
                            <div class="linqi">
                                <van-tag size="large" mark :type="type_1(tagName(endTime[index1]))">
                                    {{ tagName(endTime[index1]) }}
                                </van-tag>
                            </div>
                            <van-image :src="imgarr[index1]" @click="goToItemPage(item1)" width="10rem" height="10rem"
                                fit="cover" />

                        </div>
                        <!-- <van-row type="flex" justify="space-around">
                            <van-col span="9"> -->

                        {{ namearr[index1] }}



                        <!-- </van-col>
                            <van-col span="9"> 6</van-col>
                        </van-row> -->

                    </van-grid-item>

                </van-grid>
            </van-tab>
        </van-tabs>

    </div>
</template>

<script >
const AV = require('leancloud-storage');
const { Query, User } = AV;
export default {
    data() {
        return {
            columns: ["水果", "药物", "零食", "贵重物品", "其他"],
            active: 0,
            namearr: [],
            timearr: [],
            idarr: [],
            typearr: [],
            dayarr: [],
            imgarr: [],
            endTime: []
        }
    },
    methods: {
        goToItemPage(id) {
            this.$router.push({
                path: "/item",
                query: {
                    id: id
                }
            })
        },
        getTime(date) {
            let y = date.getFullYear() //年
            let m = date.getMonth() + 1  //月，月是从0开始的所以+1
            let d = date.getDate() //日
            m = m < 10 ? '0' + m : m //小于10补0
            d = d < 10 ? '0' + d : d //小于10补0
            return new Date(y, m, d); //返回时间形式yyyy-mm-dd
        },
        getDaysBetween(date1, date2) {
            var startDate = Date.parse(date1);
            var endDate = Date.parse(date2);
            if (startDate >= endDate) {
                return (startDate - endDate) / (1 * 24 * 60 * 60 * 1000);
            }
            return -1;
        }, tagName(endDate) {
            var endDate1 = Date.parse(endDate);
            let currentDate = new Date();
            var days = (endDate1 - currentDate) / (1 * 24 * 60 * 60 * 1000);
            // console.log(endDate1);
            let name = days > 30 ? "良好" : days > 0 ? "临期" : "已过期";

            return name;
        }, type_1(str) {

            if (str == "良好") {
                return "success";
            } else if (str == "临期") {
                return "warning";
            } else if (str == "已过期") {
                return "danger";
            }
        }
    },
    created: function () {

        const query = new AV.Query('FoodPeriod');
        // query.equalTo('Item', '香蕉');
        query.find().then((students) => {
            students.forEach((itemson) => {
                let data = itemson.attributes;
                // console.log(data);
                let imgSrc;
                if (data.img == null) {
                    imgSrc = "https://img.3dmgame.com/uploads/allimg/161212/346_161212150216_1_lit.gif";
                } else {
                    imgSrc = data.img.attributes.url;
                }
                // console.log(imgSrc);
                const ID = itemson.id;
                const Type = itemson.get('Type');
                const name = itemson.get('Item');//名字
                const timeStart = itemson.get('Start');//开始日期
                const timeEnd = itemson.get('Deadline');//结束日期
                const day = itemson.get('ShelfLife');//保质期
                const NumberOfDays = Math.ceil(this.getDaysBetween(this.getTime(new Date), timeEnd));//相差几天
                this.endTime.push(timeEnd);
                this.namearr.push(name);
                this.timearr.push(NumberOfDays);
                this.idarr.push(ID);
                this.typearr.push(Type);
                this.dayarr.push(day);
                this.imgarr.push(imgSrc);


                // console.log(img1);
                // console.log(ID);
                // console.log(NumberOfDays);
                // console.log(Type)
                // console.log(timeStart + "     " + timeEnd);
            });

            // console.log(students);
            // students 是包含满足条件的 Student 对象的数组
        });
    },
}


</script>

<style >
.goods-card {
    margin: 0;
    margin-bottom: 2px;
    background-color: rgb(165, 230, 176);
}

.goods-card2 {
    margin: 0;
    margin-bottom: 2px;
    background-color: rgb(230, 199, 165);
}

.goods-card3 {
    margin: 0;
    margin-bottom: 2px;
    background-color: rgb(230, 165, 165);
}

.delete-button {
    height: 100%;
}

.wuhu {
    margin-bottom: 40px;
}

.goods-card .van-tag--danger {
    background-color: green;
}

.goods-card2 .van-tag--danger {
    background-color: rgb(255, 225, 0);
}

.goods-card3 .van-tag--danger {
    background-color: red;
}

.zhaopian>*:nth-child(2) {
    position: inherit;

}

.linqi {
    position: relative;
    top: 30px;
    left: -10px;
}

.biankuang :hover {
    /* box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) ; */

}
</style>